<template>
  <div class="radio-box">
    <p class="title">{{ title }}</p>
    <el-radio
      v-for="(item, index) in options"
      :key="index"
      v-model="radioOptions.select"
      @change="selectChange"
      :label="JSON.stringify({ name:item.name,area: item.area, type: item.type })"
      >{{ item.name }}</el-radio
    >
  </div>
</template>

<script>
export default {
  name: "RadioBox",
  props: {
    radioOptions: {
      type: Object,
      required: true,
    },
    options: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
  },
  methods: {
    selectChange(val) {
      this.$emit("selectChange",val)
    }
  },
};
</script>

<style lang="scss" scoped>
.radio-box {
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(211, 211, 211);
  &:last-child {
    border-bottom: 0;
  }
}
.title {
  margin-top: 20px;
  font-weight: 600;
  color: #333;
  padding-left: 14px;
  font-size: 16px;
  font-family: "Microsoft Yahei";
}

::v-deep .el-radio.is-checked {
  // background-color: rgb(251, 251, 251);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(247, 247, 247));
  border-radius: 3px;
  border: 1px solid rgb(218, 218, 218);
  .el-radio__input {
    background-color: rgb(194, 12, 12);
  }
  .el-radio__label {
    color: rgb(194, 12, 12);
  }
}
::v-deep .el-radio {
  margin-right: 0;
  .el-radio__input {
    width: 4px;
    height: 4px;
    background-color: rgb(175, 175, 175);
    .el-radio__inner {
      display: none;
    }
  }
  .el-radio__label:hover {
    text-decoration: underline;
  }
  .el-radio__label {
    font-size: 12px;
    color: rgb(51, 51, 51);
  }
  display: flex;
  align-items: center;
  height: 30px;
  padding-left: 20px;
}
</style>